@import models.Tables.GenomeRow
@(row: GenomeRow, imgs: Array[String])(implicit session: Session)
    @english.home.main(row.geneid + " - Browser") {

        <style>
                .fixed-table-body {
                    overflow-x: unset;
                    overflow-y: unset;
                }

                .hidden {
                    display: none;
                }

        </style>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

        <div id="content" >
            <h1 class="title"><a href="@routes.GenomeController.browserPage("")">Genome</a> - @row.geneid</h1>
            <div class="line"></div>

            <div class="box">
                <h4 class="area">
                    <div class="area_img">
                        <i class="fa fa-minus"></i>
                    </div>
                    <span class="area_title" data-id="1">Basic</span>

                </h4>
                <div class="picture_list">

                    <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
                        float: left;
                        word-wrap: break-word">
                        <tbody>
                            <tr>
                                <th rowspan="13" style="width: 50%;
                                    vertical-align: middle;
                                    text-align: center" >

                                    <div id="slider" style="width: 440px;">

                                        <div class="flexslider" style="width: 440px;
                                            display: flex;
                                            align-items: center">
                                            <ul class="slides" style="width: 440px">
                                            @for(img <- imgs) {
                                                <li><img src="/mollusk/utils/getGenomeImgByName?name=@img"
                                                style="margin: 0 auto;
                                                    max-height: 400px;
                                                    width: 400px"/>
                                                </li>
                                            }
                                                @if(imgs.length == 0){
                                                    <h2>Still Collecting Photos</h2>
                                                }
                                            </ul>
                                        </div>

                                    </div>
                                </th>
                                <th>ID</th>
                                <td>@row.geneid</td>
                            </tr>
                            <tr>
                                <th>Organism</th>
                                <td><i>@row.organism</i></td>
                            </tr>
                            <tr>
                                <th>Phylumn</th>
                                <td>@row.phylum</td>
                            </tr>
                            <tr>
                                <th>Class</th>
                                <td>@row.classes</td>
                            </tr>
                            <tr>
                                <th>Order</th>
                                <td>@row.order</td>
                            </tr>
                            <tr>
                                <th>Family</th>
                                <td>@row.family</td>
                            </tr>
                            <tr>
                                <th>Genus</th>
                                <td>@row.genus</td>
                            </tr>
                            <tr>
                                <th>Assembly status</th>
                                <td>@row.assembly</td>
                            </tr>
                            <tr>
                                <th>NCBI status</th>
                                <td>@row.ncbi</td>
                            </tr>

                            <tr>
                                <th>Length</th>
                                <td id="length"></td>
                            </tr>
                            <tr>
                                <th>AT%</th>
                                <td>
                                @row.ath
                                </td>
                            </tr>
                            <tr>
                                <th>Download</th>
                                <td>
                                    <div><a target='_blank' href='/mollusk/download/downloadType?name=@row.geneid&fa=gb'>
                                        <i class='fa fa-download'></i> @{
                                        row.geneid
                                    }.gb </a></div>
                                    <div><a target='_blank' href='/mollusk/download/downloadType?name=@row.geneid&fa=cds'>
                                        <i class='fa fa-download'></i> @{
                                        row.geneid
                                    }.cds</a></div>
                                    <div><a target='_blank' href='/mollusk/download/downloadType?name=@row.geneid&fa=pep'>
                                        <i class='fa fa-download'></i> @{
                                        row.geneid
                                    }.pep </a></div>
                                    <div><a target='_blank' href='/mollusk/download/downloadType?name=@row.geneid&fa=gene'>
                                        <i class='fa fa-download'></i> @{
                                        row.geneid
                                    }.gene </a></div>
                                    <div><a target='_blank' href='/mollusk/download/downloadType?name=@row.geneid&fa=genome'>
                                        <i class='fa fa-download'></i> @{
                                        row.geneid
                                    }.genome </a></div>

                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>

            </div>


            <div class="box">
                <h4 class="area" id="genomeb" onclick="reloadGbrowser()">
                    <div class="area_img">
                        <i class="fa fa-minus"></i>
                    </div>
                    <span class="area_title" data-id="1">Genome Browser</span>
                </h4>
                <div class="picture_list">


                    <div style="float: left;
                        width: 52%;
                        margin-top: 55px">

                        <iframe style="border: 1px solid rgb(80, 80, 80);" src=""
                        height="270" width="95%" name="jbrowse_iframe" id="iframe">
                        </iframe>


                    </div>

                    <div style="width: 45%;
                        float: left">
                        <table class="table table-striped table-hover table-bordered" id="table" style="table-layout: fixed;
                            word-wrap: break-word" data-pagination="true" data-search="true" data-pagination-detail-h-align=" hidden"
                        data-toolbar="#toolbar" data-page-size="5" data-search-align="left" data-multiple-search="true">

                        </table>

                    </div>

                </div>
            </div>

            @if(row.locality != "NO Locality Information") {
                <div class="box" id="ref">
                    <h4 class="area">
                        <div class="area_img">
                            <i class="fa fa-minus"></i>
                        </div>
                        <span class="area_title" data-id="1">Locality （GPS）</span>

                    </h4>
                    <div class="picture_list">
                        <div id="locality"></div>


                    </div>
                </div>
            }

            <div class="box">
                <h4 class="area" >
                    <div class="area_img">
                        <i class="fa fa-minus"></i>
                    </div>
                    <span class="area_title" data-id="1">Geographical distribution</span>
                </h4>
                <div class="picture_list">
                    <div id="worldmap" style="margin: 0 auto;
                        width: 100%;
                        margin-bottom: 10px;
                        display: none"></div>
                    <table class="table table-hover table-striped table-bordered">
                        <tbody>
                            <tr>
                                <th>Description</th>
                                <td>@row.description</td>
                            </tr>

                            <tr>
                                <th style="width: 20%;">Geographical position</th>
                                <td>@row.position</td>
                            </tr>
                            <tr>
                                <th>Collection by</th>
                                <td>@row.collected</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="box" id="ref">
                <h4 class="area">
                    <div class="area_img">
                        <i class="fa fa-minus"></i>
                    </div>
                    <span class="area_title" data-id="1">Pubmed</span>

                </h4>
                <div class="picture_list">

                    <table class="display table table-bordered" id="refTable" >

                        <tr>
                            <th>Pubmed</th>
                            <td>
                            @if(row.pubmed.indexOf("http") == -1) {
                                @if(row.pubmed.trim == "Unpublished") {
                                    @row.pubmed
                                } else {
                                    <a href='https://www.ncbi.nlm.nih.gov/pubmed/@row.pubmed' target='_blank' > @row.pubmed </a>
                                }
                            } else {
                                <a href="@row.pubmed" target='_blank'> @row.pubmed </a>
                            }

                            </td>
                        </tr>
                        <tr>
                            <th>Title</th>
                            <td>@row.title</td>
                        </tr>
                        <tr>
                            <th>Journal</th>
                            <td>@row.journal</td>
                        </tr>
                        <tr>
                            <th>Author</th>
                            <td>@row.author</td>
                        </tr>

                    </table>
                </div>
            </div>

        </div>

        <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("Highmaps-6.1.0/proj4.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("Highmaps-6.1.0/highmaps.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("Highmaps-6.1.0/world-highres3.js")" type="text/javascript"></script>

        <script>
                let sars = {};
                let other = [];
                $(function () {


                    let host =  window.location.hostname;
                    let genomeName = "@{row.geneid}";
                    $("#iframe").attr("src","http://" + host +":8080/?data=MODB/" + genomeName +"/data&loc=&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0")


                    let length = "@row.length"
                    $("#length").text(length.replace(/\d{1,3}(?=(\d{3})+$)/g, function (s) {
                        return s + ','
                    }))
                    $.post("@routes.GenomeController.getWorldPostion(row.id)",function (datas) {
                        draw(datas)
                    })

                    $("#table").bootstrapTable({
                        columns: [{
                            field: "geneid",
                            title: "GeneID",
                            sortable: true,
                            formatter: function (i, v) {
                                return "<a href='/US/mollusk/genome/genePage?id=" + v.id + "' target='_blank'>" + v.geneid + "</a>"
                            }
                        }, {
                            field: "start",
                            title: "Start",
                            sortable: true,
                            formatter: function (i, v) {
                                let start = String(v.start);
                                return start.replace(/\d{1,3}(?=(\d{3})+$)/g, function (s) {
                                    return s + ','
                                })
                            }
                        }, {
                            field: "end",
                            title: "End",
                            sortable: true,
                            formatter: function (i, v) {
                                let end = String(v.end);
                                return end.replace(/\d{1,3}(?=(\d{3})+$)/g, function (s) {
                                    return s + ','
                                })
                            }
                        }, {
                            field: "strand",
                            title: "Strand",
                            sortable: true
                        }]
                    })

                    $.ajax({
                        url: "/US/mollusk/genome/getAllGeneById?id=" + @row.id,
                        type: "post",
                        success: function (data) {
                            $("#table").bootstrapTable("load", data)
                        }
                    })

                });


                let los = "@row.locality".split(";")


                let s = [];

                $.each(los, (i, v) => {
                    let l = v.split(",")
                    s.push({
                        lon: parseFloat(l[0]),
                        lat: parseFloat(l[1])
                    })
                })


                function reloadGbrowser() {
                    $("#iframe").attr('src', $("#iframe").attr('src'));
                }

                function draw(datas) {
                    let data =[];
                    Highcharts.each(datas, function (v, i) {
                        data.push({
                            'hc-key': v.key,
                            value: v.num
                        })
                    })

                    let chart = Highcharts.mapChart('locality', {
                        title: {
                            text: '@row.organism'
                        },
                        credits: {
                            enabled: false
                        },
                        legend: {
                            align: 'left',
                            layout: 'vertical',
                            floating: true
                        },
                        mapNavigation: {
                            enabled: true
                        },
                        tooltip: {
                            enabled: false,
                            hideDelay: 0,
                            formatter: function () {
                               let text = "";
                               if(this.point.lat == undefined){
                                  text = this.point.properties.name ? '<br>' + this.point.properties.name : ''
                               }else{
                                 text=  this.point.lat ?
                                           '<br>Lon: ' + this.point.lon + ' Lat: ' + this.point.lat : ''
                               }

                                return "@row.organism" + text;
                            }
                        },
                        chart: {
                            events: {
                                load: function () {
                                    this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
                                }
                            }
                        },
                        plotOptions: {
                            series: {
                                stickyTracking: false,
                                marker: {
                                    fillColor: '#FFFFFF',
                                    lineWidth: 2,
                                    lineColor: "#456AB5"
                                },
                                events: {
                                    click: function (evt) {
                                        this.chart.myTooltip.options.enabled = true;
                                        this.chart.myTooltip.refresh(evt.point, evt);
                                    },
                                    mouseOut: function () {
                                        this.chart.myTooltip.hide();
                                        this.chart.myTooltip.options.enabled = false;
                                    }
                                }

                            }
                        },
                        series: [{
                            // Use the gb-all map with no data as a basemap
                            joinBy: 'hc-key',
                            name: '物种数',
                            mapData: Highcharts.maps['custom/world-highres3'],
                            borderColor: '#707070',
                            showInLegend: false,

                        },{
                            type:"map",
                            mapData: Highcharts.maps['custom/world-highres3'],
                            name:"country",
                            borderColor: '#707070',
                            color: "#FDB462",
                            data:data,
                            tooltip: {
                                useHTML: true,
                                headerFormat: '',
                                pointFormat: '{point.properties.name}',
                                footerFormat: ''
                            }
                        }, {
                            name: 'Separators',
                            type: 'mapline',
                            data: Highcharts.geojson(Highcharts.maps['custom/world-highres3'], 'mapline'),
                            color: '#707070',
                            showInLegend: false,
                            enableMouseTracking: false
                        }, {
                            // Specify cities using lat/lon
                            type: 'mappoint',
                            name: 'Locality',
                            marker: {
                                radius: 3,

                            },
                            data: s,
                            turboThreshold: 0, //js创建超过1000个对象后，需要加此参数才能描点


                        }]
                    });


                    /*                    let area = [];

                                        $.each(los, (i, v) => {
                                            let path = "M";
                                            let l = v.split(";");


                                            if (l.length > 2) {
                                                $.each(l, (i1, v1) => {
                                                    let suffix = "L";
                                                    if (i1 === l.length - 1) {
                                                        suffix = "z"
                                                    }
                                                    let point = chart.get("id" + i + i1);
                                                    path += point.x + "," + point.y + suffix
                                                })
                                                area.push({
                                                    path: path
                                                })
                                            }
                                        })

                                        chart.addSeries({
                                            name: 'Area',
                                            type: 'map',
                                            lineWidth: 2,
                                            color: "#456AB5",
                                            data: area
                                        });*/


                }






        </script>


    }